<!-- 发票编辑 -->
<template>
	<view class="invoice-edit">
		<view class="head-tools">
			<button
				class="btn "
				:class="{ 'btn-gray': type != 'person', 'btn-yellow': type == 'person' }"
				@click="
					type = 'person';
					invoiceData.invoiceType = 0;
				"
			>
				个人
			</button>
			<button
				class="btn "
				:class="{ 'btn-gray': type != 'unit', 'btn-yellow': type == 'unit' }"
				@click="
					type = 'unit';
					invoiceData.invoiceType = 1;
				"
			>
				单位
			</button>
		</view>
		<uniForms class="form">
			<view class="group" v-if="type == 'person'">
				<formListItem class="item" :label="'发票抬头'" :label-width="130" :type="'text'" placeholder="请输入发票抬头" :value.sync="invoiceData.invoiceTitle"></formListItem>
				<formListItem class="item" :label="'收票邮箱'" :label-width="130" :type="'text'" placeholder="请输入收票邮箱" :value.sync="invoiceData.invoiceEmail"></formListItem>
			</view>
			<view class="group" v-if="type == 'unit'">
				<formListItem class="item" :label="'发票抬头'" :label-width="130" :type="'text'" placeholder="请输入发票抬头" :value.sync="invoiceData.invoiceTitle"></formListItem>
				<formListItem class="item" :label="'税 号'" :label-width="130" :type="'text'" placeholder="请输入税号" :value.sync="invoiceData.invoiceTaxNo"></formListItem>
				<formListItem
					class="item"
					:label="'单位地址'"
					:label-width="130"
					:type="'text'"
					placeholder="请输入单位地址"
					:value.sync="invoiceData.vatCompanyAddress"
				></formListItem>
				<formListItem class="item" :label="'电话号码'" :label-width="130" :type="'text'" placeholder="请输入电话号码" :value.sync="invoiceData.vatTelphone"></formListItem>
				<formListItem class="item" :label="'开户银行'" :label-width="130" :type="'text'" placeholder="请输入开户银行" :value.sync="invoiceData.vatBankName"></formListItem>
				<formListItem
					class="item"
					:label="'银行账号'"
					:label-width="130"
					:type="'text'"
					placeholder="请输入银行账号"
					:value.sync="invoiceData.vatBankAccount"
				></formListItem>
				<formListItem class="item" :label="'收票邮箱'" :label-width="130" :type="'text'" placeholder="请输入收票邮箱" :value.sync="invoiceData.invoiceEmail"></formListItem>
			</view>
		</uniForms>
		<button class="btn btn-yellow save-btn" @click="saveInvoice">保存</button>
	</view>
</template>

<script>
import uniForms from '@/components/uni-forms/uni-forms.vue';
import formListItem from '@/components/form-list-item/form-list-item.vue';
export default {
	components: {
		uniForms,
		formListItem
	},
	data() {
		return {
			type: 'person', //发票类型 person unit
			invoiceData: this.$store.state.orderModule.invoiceData

			// {
			// 	//发票数据

			// 	// orderNo:"", //订单号
			// 	invoiceType:0, //发票类型 0：个人 1:单位
			// 	invoiceTitle:"", //发票抬头
			// 	invoiceTaxNo:"", //发票税号
			// 	invoiceEmail:"", //开票邮箱
			// 	// invoiceTax:"", //开票税金
			// 	vatCompanyAddress:"" ,//公司地址
			// 	vatTelphone:"" ,//联系电话
			// 	vatBankName:"" ,//开户银行
			// 	vatBankAccount:"" ,//银行账号

			// },
		};
	},
	methods: {
		saveInvoice() {
			if (this.verification()) {
				this.$store.commit('setInvoiceData', { ...this.invoiceData });
				uni.navigateBack({
					delta: 1
				});
			}
		},

		verification() {
			// 验证
			if (!this.invoiceData.invoiceTitle || this.invoiceData.invoiceTitle == '') {
				uni.showToast({
					icon: 'none',
					mask: true,
					duration: 2000,
					title: '请选择发票抬头！'
				});
				return false;
			} else if (!this.invoiceData.invoiceEmail || this.invoiceData.invoiceEmail == '') {
				uni.showToast({
					icon: 'none',
					mask: true,
					duration: 2000,
					title: '请填写收票邮箱！'
				});
				return false;
			} else if (this.type == 'unit') {
				if (!this.invoiceData.invoiceTaxNo || this.invoiceData.invoiceTaxNo == '') {
					uni.showToast({
						icon: 'none',
						mask: true,
						duration: 2000,
						title: '请输入税号！'
					});
					return false;
				} else if (!this.invoiceData.vatCompanyAddress || this.invoiceData.vatCompanyAddress == '') {
					uni.showToast({
						icon: 'none',
						mask: true,
						duration: 2000,
						title: '请输入单位地址！'
					});
					return false;
				} else if (!this.invoiceData.vatTelphone || this.invoiceData.vatTelphone == '') {
					uni.showToast({
						icon: 'none',
						mask: true,
						duration: 2000,
						title: '请输入电话号码！'
					});
					return false;
				} else if (!this.invoiceData.vatBankName || this.invoiceData.vatBankName == '') {
					uni.showToast({
						icon: 'none',
						mask: true,
						duration: 2000,
						title: '请输入开户银行！'
					});
					return false;
				} else if (!this.invoiceData.vatBankAccount || this.invoiceData.vatBankAccount == '') {
					uni.showToast({
						icon: 'none',
						mask: true,
						duration: 2000,
						title: '请输入银行账号！'
					});
					return false;
				} else {
					return true;
				}
			} else {
				return true;
			}
		}
	},
	onLoad(option) {
		this.invoiceData.invoiceType = 0;
	}
};
</script>

<style lang="scss" scoped>
.invoice-edit {
	width: 100%;
	.head-tools {
		background-color: #fff;
		padding: 20rpx 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		.btn {
			width: 340rpx;
			padding: 16rpx 0rpx;
		}
	}
	.form {
		width: 100%;
		box-sizing: border-box;
		.group:nth-last-child(n + 2) {
			margin-bottom: 26rpx;
		}
		.item {
			display: flex;
			width: 100%;
			padding: 0rpx 20rpx;
			background-color: #fff;
			box-sizing: border-box;
		}
		.item:nth-child(1) {
			border-radius: 8px 8px 0px 0px;
		}
		.item:nth-last-child(1) {
			border-radius: 0px 0px 8px 8px;
		}
		.item:nth-last-child(n + 2) {
			border-bottom: 2rpx solid #efeff0;
		}
	}
	.save-btn {
		display: block;
		width: 90%;
		font-size: 30rpx;
		padding: 14rpx 0rpx;
		margin: auto;
		margin-top: 150rpx;
	}
	.remove-btn {
		display: block;
		width: 90%;
		font-size: 30rpx;
		padding: 14rpx 0rpx;
		margin: auto;
		margin-top: 20rpx;
	}
}
</style>
